<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>JavaScript Simple Dialog</title>
        <link href="../simple-dialog.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="../simple-dialog.js"></script>

        <link href="style.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="demo.js"></script>
    </head>
    <body>
		<h1>JavaScript Simple Dialog</h1>
		Project home: <a href="http://code.google.com/p/javascript-simple-dialog/">http://code.google.com/p/javascript-simple-dialog/</a>
		<br />Author's blog: <a href="http://qingbo.org/">http://qingbo.org/</a>
		<br />All links below are triggers of dialog demonstrations.
		<hr />

		<h3>Select elements for testing IE</h3>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>
		<select><option>Chinese</option><option>English</option></select>

		<h3>The basic usage</h3>
		<pre>new Dialog({content: 'This is the very basic dialog!'});</pre>
		<a href="javascript:Demo.basic()">Click here</a> to see demo of code above.

		<h3>Demos</h3>
		<ul>
			<li><a href="javascript:Demo.alert('Hello, world!')">A simple alert</a>. You can check the code of Demo.alert, which only creates one dialog instance and reuses it each time (destroyOnClose option set to false).</li>
			<li><a href="javascript:Demo.prompt()">A simple prompt</a> using "focus" option. The input text will be displayed here when you press OK: <span id="prompt-answer"></span></li>
			<li><a href="javascript:Demo.addButtons()">Add buttons</a> at "run time".</li>
			<li><a href="javascript:Demo.addTitle()">Add title</a> at "run time".</li>
			<li><a href="javascript:Demo.mailForm()">A form example</a> with "fake" Ajax.</li>
			<li><a href="javascript:Demo.selectStack()">IE 6 select element test</a>.
			</li>
		</ul>
	</body>
</html>

